<template>
  <el-card>
    <hr>
    <h3>基本信息</h3>
    <hr>
    <el-form>
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="客户编号">{{customer.id}}</el-form-item>
        </el-col>
        <!--      <el-col :span="6">-->
        <!--        <el-form-item label="订单编号"></el-form-item>-->
        <!--      </el-col>-->
      </el-row>
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="客户状态">{{customer.status}}</el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="客户类型">{{customer.type}}</el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="客户姓名">{{customer.name}}</el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="客户性别" v-if="customer.gender==1">女</el-form-item>
          <el-form-item label="客户性别" v-if="customer.gender==0">男</el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="年龄">{{customer.age}}</el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="联系电话">{{customer.contactPhone}}</el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="身份证号">{{customer.idNumber}}</el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="紧急电话">{{customer.emergencyPhone}}</el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="紧急联系人">{{customer.emergencyContact}}</el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="楼盘名称">{{customer.propertyName}}</el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="户型">{{customer.houseType}}</el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="面积">{{customer.houseSize}}</el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="3">
          <el-form-item label="省份">{{customer.province}}</el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label="城市">{{customer.city}}</el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label="区县">{{customer.district}}</el-form-item>
        </el-col>
        <el-col :span="15">
          <el-form-item label="详细地址">{{customer.propertyAddr}}</el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <hr>
    <h3>定金信息</h3>
    <hr>
    <el-form>
      <el-form-item label="收款时间">{{deposit.collectionTime}}</el-form-item>
      <el-form-item label="订单金额">{{deposit.depositAmount}}</el-form-item>
      <el-form-item label="付款方式">{{deposit.paymentMethod}}</el-form-item>
    </el-form>
    <hr>
    <h3>合同信息</h3>
    <hr>
    <el-form>
      <el-form-item label="录入时间">{{projectFunds.inputTime}}</el-form-item>
      <el-form-item label="基础施工">{{projectFunds.basicsBuildCost}}</el-form-item>
      <el-form-item label="设计费">{{projectFunds.designCost}}</el-form-item>
      <el-form-item label="录入人">{{projectFunds.keyboarder}}</el-form-item>
    </el-form>
    <hr>
    <h3>退单信息</h3>
    <hr>
    <el-form>
      <el-timeline style="max-width: 600px">
        <el-timeline-item placement="top">
          <el-card>
            <p>
              <el-form-item label="退单类型">{{refund.refundType}}</el-form-item>
              <el-form-item label="退单原因">{{refund.refundReason}}</el-form-item>
              <el-form-item label="申请人">{{refund.applicationPerson}}</el-form-item>
              <el-form-item label="申请时间">{{refund.startApplicationTime}}</el-form-item>
            </p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item placement="top">
          <el-card>
            <p>
              <el-form-item label="审核（部门经理）"></el-form-item>
              <el-form-item label="审核意见">{{refund.auditAdvice1}}</el-form-item>
              <el-form-item label="审核人">{{refund.auditor1}}</el-form-item>
              <el-form-item label="审核时间">{{refund.auditTime1}}</el-form-item>
            </p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-form>
    <hr>
    <h3>退款信息</h3>
    <hr>
    <el-form>
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="审核(总经办)"></el-form-item>
          <el-form-item label="审核意见">
            <el-select v-model="audit.auditAdvice2">
              <el-option label="通过" value="1"></el-option>
              <el-option label="未通过" value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-button type="primary" @click="save">保存</el-button>
    </el-form>
  </el-card>


</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import qs from "qs";
import {ElMessage} from "element-plus";
import request from "@/utils/request";

const id = new URLSearchParams(window.location.search).get('id');

const customer = ref({
  id:'',
  status:'',
  type:'',
  name:'',
  gender:'',
  age:'',
  contactPhone:'',
  idNumber:'',
  emergencyPhone:'',
  emergencyContact:'',
  propertyName:'',
  houseType:'',
  houseSize:'',
  province:'',
  city:'',
  district:'',
  propertyAddr:''
  // id:'1',
  // status:'10',
  // type:'10',
  // name:'小李',
  // gender:'男',
  // age:'26',
  // contactPhone:'12345678910',
  // idNumber:'350181199612101798',
  // emergencyPhone:'12345678910',
  // emergencyContact:'小李',
  // propertyName:'西钓鱼台嘉园',
  // houseType:'三居室',
  // houseSize:'245㎡',
  // id:'1',
  // clientStatus:'转单中',
  // clientType:'现房客户',
  // clientName:'小李',
  // gender:'男',
  // age:'26',
  // phone:'12345678910',
  // numberId:'350181199612101798',
  // housesName:'西钓鱼台嘉园',
  // housesType:'三居室',
  // acreage:'245㎡',
  // detailAddress:'北京市 海淀区 海淀西三环钓鱼台村1栋3单元'
})
const loadCustomer = (id)=>{
  request.get('/api/crm/refund/selectCustomer/'+id).then((response)=>{
      customer.value = response.data;
  })
}

const deposit = ref({
  collectionTime:'',
  depositAmount:'',
  paymentMethod:'',
  // collectionTime:'2024-02-02',
  // depositAmount:'5000',
  // paymentMethod:'微信',
})
const loadDeposit = (id)=>{
  request.get('/api/crm/refund/selectDeposit/'+id).then((response)=>{
      deposit.value = response.data;
  })
}

const projectFunds = ref({
  inputTime:'',
  basicsBuildCost:'',
  designCost:'',
  keyboarder:''
  // inputTime:'2024-02-01',
  // basicsBuildCost:'60000',
  // designCost:'6000',
  // keyboarder:'小张'
});
const loadprojectFunds = (id)=>{
  request.get('/api/crm/refund/selectContract/'+id).then((response)=>{
      projectFunds.value = response.data;
  })
}

const refund = ref({
  refundType:'',
  refundReason:'',
  applicationPerson:'',
  auditTime1:'',
  auditAdvice1:'',
  auditor1:'',
  auditAdvice2:'',
  auditor2:'',
  auditTime2:'',
  startApplicationTime:''
  // refundType:'退定金',
  // refundReason:'不想装修了',
  // applicationPerson:'小红',
  // auditTime1:'2024-02-13',
  // auditAdvice1:'通过',
  // auditor1:'王总',
  // auditAdvice2:'通过',
  // auditor2:'赵总',
  // auditTime2:'2024-02-14',
  // startApplicationTime:'2024-02-12'
});

const loadRefund = (id)=>{
  request.get('/api/crm/refund/selectById/'+id).then((response)=>{
      refundApplication.value = response.data;
  })
}
onMounted(()=>{
  loadRefund(id);
  loadprojectFunds(id);
  loadDeposit(id);
  loadCustomer(id);
})

const audit = ref({
  id:id,
  auditAdvice2:''
})
const save = ()=>{
  let data = qs.stringify(audit.value);
  request.post('/api/crm/refund/saveAudit2',data)
      .then((response)=>{
          ElMessage.success('保存成功');
  })
}
</script>


<style scoped>

</style>